<script setup lang="ts">
import { ref,onMounted } from "vue";
import { useSlotManagementStore } from '@/store/slot_mangement';
import usequery from '@/hooks/slot_management/slot_query'
import helperprint from '@/hooks/print/helper_print'

//@ts-ignore
import query_template from "./query_template.js"

//@ts-ignore
import { throttle } from 'lodash';
const SlotManagementStore = useSlotManagementStore();

const {
    cons,
    getquery
} = usequery()

const {
    buildDesigner,
    print2
}= helperprint()

onMounted(() => {
    buildDesigner(query_template);
});

let screenHeight = ref(window.innerHeight - 260);
window.addEventListener('resize', function () {
    screenHeight.value = window.innerHeight - 260;
});


// 刷新 节流函数
const throttlehandquery = throttle(() => getquery(), 3000, {
    leading: true, // 第一次触发立即执行
    trailing: false // 最后一次触发不执行
});





</script>

<template>
    <el-card>
        <el-form @submit.native.prevent class="form" :inline="true">
            

            <el-form-item>
                <el-input  v-model="cons" placeholder="请输入合同号,多个合同号之间请用逗号分隔" style="width: 700px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="throttlehandquery" v-has="`btn_slotquery_query`"
                    style="margin-left: -30px;">查询</el-button>

                    <el-form-item>
                <el-button type="warning" @click='print2({"table":SlotManagementStore.querytableData_pinia})' v-has="`btn_slotquery_print`"
                    style="margin-left: 15px;">打印</el-button>
            </el-form-item>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <el-scrollbar :height="screenHeight"> <!-- 菜单滚动条 -->
            <el-table :data="SlotManagementStore.querytableData_pinia" :height="screenHeight" style="width: 100%">
                <el-table-column prop="ContractNo" label="合同号"></el-table-column>
                <el-table-column prop="CaseNo" label="箱号"></el-table-column>
                <el-table-column prop="LocationID" label="货位"></el-table-column>
            </el-table>
        </el-scrollbar>
    </el-card>
</template>

<style lang="css" scoped>

</style>